layui.use(['form','upload'],function () {
    let $ = layui.$
        ,form = layui.form
        ,upload = layui.upload;
    function createSkuTable(url = '') {
        var specData = [];
        $.each($('#spec-table tbody tr'), function () {
            var child = [];
            $.each($(this).find('input[type=checkbox]'), function () {
                child.push({id: $(this).val(), title: $(this).attr('title'), checked: $(this).is(':checked')});
            });
            var specItem = {id: $(this).find('td').eq(0).attr('data-id'), title: $(this).find('td').eq(0).text(), show: $(this).find('input[type=checkbox]:checked').length > 0, child: child};
            specData.push(specItem);
        });


        if ($('#spec-table tbody input[type=checkbox]:checked').length) {
            $('#sku-table').parent().parent().removeClass('layui-hide');

            var prependThead = [], prependTbody = [];
            $.each(specData, function () {
                if (this.show) {
                    prependThead.push(this.title);
                    var prependTbodyItem = [];
                    $.each(this.child, function () {
                        if (this.checked) {
                            prependTbodyItem.push({id: this.id, title: this.title});
                        }
                    });
                    prependTbody.push(prependTbodyItem);
                }
            });
            if (prependThead.length > 0) {
                $('#sku-table thead').html('<tr>' +
                    prependThead.map(function (t, i, a) {
                        return '<th>' + t + '</th>'
                    }) +
                    '<th>图片</th>' +
                    '<th>销售价(元) <i class="layui-icon layui-icon-cols"></i></th>' +
                    '<th>市场价(元) <i class="layui-icon layui-icon-cols"></i></th>' +
                    '<th>成本价(元) <i class="layui-icon layui-icon-cols"></i></th>' +
                    '<th>库存 <i class="layui-icon layui-icon-cols"></i></th>' +
                    '<th>状态 </th>' +
                    '</tr>');
            }

            var prependTbodyTrs = [];
            prependTbody.reduce(function (prev, cur, index, array) {
                var tmp = [];
                prev.forEach(function (a) {
                    cur.forEach(function (b) {
                        tmp.push({id: a.id + '-' + b.id, title: a.title + '-' + b.title});
                    })
                });
                return tmp;
            }).forEach(function (item, index, array) {
                prependTbodyTrs.push('<tr>' +
                    item.title.split('-').map(function (t, i, a) {
                        return '<td>' + t + '</td>';
                    }) +
                    '<td><input type="hidden" name="skus[' + item.id + '][picture]" value=""><img src="/static/admin/image/sku-add.png" alt="sku图片" style="max-height: 200px;max-height: 200px;"></td>' +
                    '<td><input type="text" name="skus[' + item.id + '][price]" value="0" class="layui-input" lay-verify="required|number" lay-reqtext="销售价不能为空"></td>' +
                    '<td><input type="text" name="skus[' + item.id + '][market_price]" value="0" class="layui-input" lay-verify="required|number" lay-reqtext="市场价不能为空"></td>' +
                    '<td><input type="text" name="skus[' + item.id + '][cost_price]" value="0" class="layui-input" lay-verify="required|number" lay-reqtext="成本价不能为空"></td>' +
                    '<td><input type="text" name="skus[' + item.id + '][stock]" value="0" class="layui-input" lay-verify="required|number" lay-reqtext="库存不能为空"></td>' +
                    '<td><select name="skus[' + item.id + '][status]"><option value="1">启用</option><option value="0">禁用</option></select></td>' +
                    '</tr>');
            });
            if (prependTbodyTrs.length > 0) {
                $('#sku-table tbody').html(prependTbodyTrs.join(''));
                $('input[name=spec]').val(JSON.stringify(specData));
                form.render('select');
                upload.render({
                    elem: '#sku-table td img',
                    // url: url,
                    url:'/admin/upload/image',
                    exts: 'png|jpg|ico|jpeg|gif',
                    accept: 'images',
                    acceptMime: 'image/*',
                    multiple: false,
                    done: function (res) {
                        // if (res.code === 200) {
                        //     var url = res.data.url;
                        //     $(this.item).attr('src', url).prev().val(url);
                        //     layer.msg(res.msg);
                        // } else {
                        //     layer.msg(res.msg);
                        // }
                        if (res.code === 1) {
                            var url = res.data.url;
                            $(this.item).attr('src', url).prev().val(url);
                            layer.msg(res.msg);
                        } else {
                            layer.msg(res.msg);
                        }
                        return false;
                    }
                });
            }
        } else {
            $('#sku-table').parent().parent().addClass('layui-hide');
            $('#sku-table thead').html('');
            $('#sku-table tbody').html('');
            $('input[name=spec]').val('');
        }
    }

    /**
     * 初始化sku表
     */
    createSkuTable();

    /**
     * 监听sku表变化
     */
    form.on('checkbox(filter)', function (data) {

        createSkuTable();
    });

    /**
     * 监听批量赋值
     */
    $(document).on('click', '#sku-table thead tr th i', function () {
        var that = this;
        layer.prompt(function (value, index, elem) {
            $.each($('#sku-table tbody tr'), function () {
                $(this).find('td').eq($(that).parent().index()).children('input').val(value);
            });
            layer.close(index);
        });
    });
})